<template>
  <div class="q-px-sm">
    <q-resize-observer :debounce="300" @resize="resize" />
    <div class="col-md-3 col-xs-6 text-left q-px-sm q-pb-md">
      <q-btn-toggle
        style="height: 36px"
        @input="changeQueryDate(dateQuery)"
        v-model="dateQuery"
        no-caps
        rounded
        unelevated
        toggle-color="primary"
        :options="[
          { label: '上月', value: 'month' },
          { label: '实时', value: 'day' },
          { label: '本周', value: 'week' }
        ]"
      />
    </div>
    <div class="row">
      <div class="col-md-3 col-xs-6 text-center q-px-sm q-pb-md">
        <sc-shadow>
          <q-card flat square class="q-pa-md">
            <q-item-label class="q-mb-sm">
              <q-avatar
                color="blue-1"
                size="md"
                text-color="primary"
                class="q-mr-sm"
                icon="groups"
              ></q-avatar>
            </q-item-label>
            <q-item-label
              class="text-grey-7 q-mb-sm"
              style="font-size: x-large"
            >
              <strong>{{ zview | numeral('0,0') }}</strong>
            </q-item-label>
            <q-item-label caption class="q-mb-sm">
              {{ zviewtitle }}</q-item-label
            >
            <q-item-label>
              <span> 数据更新至{{ zviewdate }} </span>
            </q-item-label>
          </q-card>
        </sc-shadow>
      </div>
      <div class="col-md-3 col-xs-6 text-center q-px-sm q-pb-md">
        <sc-shadow>
          <q-card flat square class="q-pa-md">
            <q-item-label class="q-mb-sm">
              <q-avatar
                color="purple-1"
                size="md"
                text-color="purple"
                class="q-mr-sm"
                icon="gps_fixed"
              ></q-avatar>
            </q-item-label>
            <q-item-label
              class="text-grey-7 q-mb-sm"
              style="font-size: x-large"
            >
              <strong>
                {{ zretain | numeral('0,0') }}
              </strong>
            </q-item-label>
            <q-item-label caption class="q-mb-sm">
              {{ zretaintitle }}
            </q-item-label>
            <q-item-label>
              {{ zretaintitle_new }}
              <strong class="text-green">{{
                zretain_new | numeral('0,0')
              }}</strong>
            </q-item-label>
          </q-card>
        </sc-shadow>
      </div>
      <div class="col-md-3 col-xs-6 text-center q-px-sm q-pb-md">
        <sc-shadow>
          <q-card flat square class="q-pa-md">
            <q-item-label class="q-mb-sm">
              <q-avatar
                color="orange-1"
                size="md"
                text-color="orange"
                class="q-mr-sm"
                icon="opacity"
              ></q-avatar>
            </q-item-label>
            <q-item-label
              class="text-grey-7 q-mb-sm"
              style="font-size: x-large"
            >
              <strong>{{ zvisittrend_session_cnt | numeral('0,0') }}</strong>
            </q-item-label>
            <q-item-label caption class="q-mb-sm">
              {{ zvisittrendtitle }}
            </q-item-label>
            <q-item-label>
              {{ zvisittrendtitle_new }}

              <strong class="text-negative">{{
                zvisittrend_visit_pv | numeral('0,0')
              }}</strong>
            </q-item-label>
          </q-card>
        </sc-shadow>
      </div>
      <div class="col-md-3 col-xs-6 text-center q-px-sm q-pb-md">
        <sc-shadow>
          <q-card flat square class="q-pa-md">
            <q-item-label class="q-mb-sm">
              <q-avatar
                color="green-1"
                size="md"
                text-color="green"
                class="q-mr-sm"
                icon="filter_list"
              ></q-avatar>
            </q-item-label>
            <q-item-label
              class="text-grey-7 q-mb-sm"
              style="font-size: x-large"
            >
              <strong v-if="userInfo.isadmin == 0">{{
                zvisittrend_stay_time_uv | numeral('0,0')
              }}</strong>
              <strong v-else>{{
                zvisittrend_stay_time_uv | numeral('0.00')
              }}</strong>
            </q-item-label>
            <q-item-label caption class="q-mb-sm">
              {{ zvisitstaytitle }}
            </q-item-label>
            <q-item-label class="">
              {{ zvisitstaytitle_new }}
              <strong class="text-negative" v-if="userInfo.isadmin == 0">{{
                zvisittrend_visit_depth | numeral('(0,0)')
              }}</strong>
              <strong class="text-negative" v-else>{{
                zvisittrend_visit_depth | numeral('(0.00)')
              }}</strong>
            </q-item-label>
          </q-card>
        </sc-shadow>
      </div>
    </div>
    <div class="row q-gutter-y-md">
      <div class="col-sm-6 col-xs-12 q-px-sm">
        <q-card flat class="no-border-radius">
          <q-card-section class="bg-white">
            <q-avatar
              color="orange-1"
              size="sm"
              text-color="orange"
              class="q-mr-sm"
              icon="highlight"
            ></q-avatar>
            <span> 入驻商家 </span>
          </q-card-section>
          <q-separator />
          <q-card
            flat
            square
            class="q-pa-md text-center"
            style="min-height: 184px"
          >
            <q-item-label class="q-mt-md q-mb-md"> 店铺总数</q-item-label>
            <q-item-label
              class="text-grey-7 q-mb-md"
              style="font-size: xx-large"
            >
              <strong>{{ cardtotal | numeral('0,0') }}</strong>
            </q-item-label>
            <q-item-label caption class="q-mb-md">
              <q-spinner-rings color="primary" size="xs" />
              <span>更新至{{ newdate }}</span>
            </q-item-label>
          </q-card>
        </q-card>
      </div>
      <div class="col-sm-6 col-xs-12 q-px-sm">
        <q-card flat class="no-border-radius">
          <q-card-section class="bg-white">
            <q-avatar
              color="red-1"
              size="sm"
              text-color="negative"
              class="q-mr-sm"
              icon="local_cafe"
            ></q-avatar>
            <span> 店铺分析 </span>
          </q-card-section>
          <q-separator />
          <q-card flat square class="text-center">
            <div class="row items-center">
              <q-card flat class="col-xs-6 q-ma-none" style="min-height: 184px">
                <q-knob
                  readonly
                  v-model="p_inheartuser"
                  size="60px"
                  :thickness="0.22"
                  color="red"
                  track-color="red-1"
                  class="text-orange absolute-center"
                >
                </q-knob>
                <q-knob
                  readonly
                  v-model="p_wxappuser"
                  size="90px"
                  :thickness="0.16"
                  color="blue"
                  track-color="blue-1"
                  class="text-orange absolute-center"
                ></q-knob>
                <q-knob
                  readonly
                  v-model="p_isverifieduser"
                  size="120px"
                  :thickness="0.12"
                  color="green"
                  track-color="green-1"
                  class="text-orange absolute-center"
                ></q-knob>
              </q-card>
              <q-card-section class="col-auto">
                <q-item-label>
                  <q-icon
                    class="q-mr-sm"
                    size="1em"
                    name="lens"
                    color="green"
                  />
                  <span style="font-size: small"
                    >用心客户：{{ p_inheartuser }}%--({{ inheartuser }})</span
                  >
                </q-item-label>
                <q-item-label>
                  <q-icon size="1em" class="q-mr-sm" name="lens" color="blue" />
                  <span style="font-size: small"
                    >入驻商圈：{{ p_wxappuser }}%--({{ wxappuser }})</span
                  >
                </q-item-label>
                <q-item-label>
                  <q-icon size="1em" class="q-mr-sm" name="lens" color="red" />
                  <span style="font-size: small"
                    >绑定店铺：{{ p_isverifieduser }}%--({{
                      isverifieduser
                    }})</span
                  >
                </q-item-label>
              </q-card-section>
            </div>
          </q-card>
        </q-card>
      </div>
      <div class="col-12">
        <div class="row">
          <div class="col-md-6 col-xs-12 q-px-sm q-mb-md">
            <q-card flat class="no-border-radius text-grey-9">
              <q-card-section class="bg-white">
                <q-avatar
                  color="purple-1"
                  size="sm"
                  text-color="purple"
                  class="q-mr-sm"
                  icon="search"
                ></q-avatar>
                <span> 热门搜索 </span>
                <span>
                  <q-icon
                    name="more_vert"
                    color="grey-7"
                    class="float-right"
                  ></q-icon>
                </span>
              </q-card-section>
              <q-separator />
              <q-item-label class="row">
                <div class="col-xl-6 col-md-12 col-sm-6 col-xs-12 q-px-sm">
                  <div class="q-mt-md q-mb-sm q-pl-sm">
                    <span class="block q-mb-sm">搜索次数</span>
                    <span class="block" style="font-size: x-large">{{
                      keywordtotal | numeral('0,0')
                    }}</span>
                  </div>
                  <eline
                    ref="searchUserLine"
                    :option="ktotallist.option"
                    :height="ktotallist.height"
                  />
                </div>
                <div class="col-xl-6 col-md-12 col-sm-6 col-xs-12 q-px-sm">
                  <div class="q-mt-md q-mb-sm q-pl-sm">
                    <span class="block q-mb-sm">关键词类别（前十）</span>
                  </div>
                  <epie
                    ref="salePie"
                    :option="ktotallist2.option"
                    :height="ktotallist2.height"
                  />
                </div>
              </q-item-label>
              <q-table
                :data="rankingtable.data"
                :columns="rankingtable.columns"
                row-key="key"
                rows-per-page-label="每页显示"
              ></q-table>
            </q-card>
          </div>
          <div class="col-md-6 col-xs-12 q-px-sm">
            <q-card flat class="no-border-radius q-pb-md">
              <q-card-section>
                <q-avatar
                  color="blue-1"
                  size="sm"
                  text-color="primary"
                  class="q-mr-sm"
                  icon="home_work"
                ></q-avatar>
                <span>商家统计</span>
                <span>
                  <q-icon
                    name="more_vert"
                    color="grey-7"
                    class="float-right"
                  ></q-icon>
                </span>
              </q-card-section>
              <q-separator />
              <q-item-label class="q-mt-md">
                <epie
                  ref="salePie"
                  :option="cardtotalpie.option"
                  :height="cardtotalpie.height"
                />
              </q-item-label>
              <q-item-label class="q-mt-md">
                <epie
                  ref="areaPie"
                  :option="cardtotalpie2.option"
                  :height="cardtotalpie2.height"
                />
              </q-item-label>
            </q-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ScShadow from 'components/shadow/ScShadow'
import MONITOR_DATA from '@/mock/data/dashboard/monitorData'
import moment from 'moment'
import eline from 'components/echarts/Eline'
import epie from 'components/echarts/Epie'
import { getLoginData } from '@/utils/localStorage'
import {
  wx_getDailySummaryApi,
  getrecordAnalysisApi,
  getuserReleaseApi,
  wx_getRetainApi,
  wx_getVisitTrendApi,
  getkeywordListApi,
  getcardTotalApi,
  getcardSourceApi
} from '@/api/analysisApi'

export default {
  name: 'statisticalOverview',
  components: { ScShadow, eline, epie },
  data() {
    return {
      monitorData: MONITOR_DATA,
      rating: 4.5,
      stepData: [20, 40, 80],
      userInfo: {},
      type: '日',
      dateQuery: 'month',
      startDate: '',
      beginDate: '',
      endDate: '',
      months: '',

      zviewtitle: '',
      zretaintitle_new: '',
      zview: 0,
      zviewdate: '',

      zretaintitle: '',
      zretain: 0,
      zretain_new: 0,

      zvisittrendtitle: '',
      zvisittrend_session_cnt: 0,
      zvisittrend_visit_pv: 0,
      zvisittrend_visit_uv: 0,
      zvisittrend_visit_uv_new: 0,
      zvisittrend_stay_time_uv: 0,
      zvisittrend_stay_time_session: 0,
      zvisittrend_visit_depth: 0,
      zvisittrendtitle_new: '',

      zvisitstaytitle: '',
      zvisitstaytitle_new: '',

      newdate: moment(new Date()).format('YYYY-MM-DD'),
      inheartuser: 0,
      wxappuser: 0,
      isverifieduser: 0,
      p_inheartuser: 0,
      p_wxappuser: 0,
      p_isverifieduser: 0,

      keywordtotal: 0,
      ktotallist: {
        height: 260,
        option: {
          xAxis: {
            show: false,
            data: []
          },
          yAxis: {
            show: false
          },
          series: {
            name: '搜索次数',
            data: []
          },
          grid: {
            right: '1%',
            top: '0%',
            left: '-10%',
            containLabel: true
          }
        }
      },
      keywordtotal2: 0,
      ktotallist2: {
        height: 260,
        option: {
          legend: {
            data: []
          },
          series: {
            name: '关键词统计',
            data: []
          }
        }
      },
      rankingtable: {
        columns: [
          {
            name: 'id',
            required: true,
            label: '排名',
            align: 'left',
            field: 'id'
          },
          {
            name: 'keyword',
            align: 'left',
            label: '搜索关键词',
            field: 'keyword'
          },
          {
            name: 'total',
            align: 'left',
            label: '搜索次数',
            field: 'total'
          }
        ],
        data: []
      },
      cardtotal: 0,
      cardtotalpie: {
        height: 500,
        option: {
          title: {
            text: '供应商分布（区域）',
            left: 'center',
            textStyle: {
              color: '#333',
              fontWeight: 'bold',
              fontSize: 14
            }
          },
          legend: {
            data: []
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['45%', '60%'],
              selectedMode: 'single',
              labelLine: {
                length: 30
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                formatter: '\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  b: {
                    color: '#4C5058',
                    fontSize: 14,
                    fontWeight: 'bold',
                    lineHeight: 33
                  },
                  per: {
                    color: '#fff',
                    backgroundColor: '#1890FF',
                    padding: [3, 4],
                    borderRadius: 4
                  }
                }
              },
              data: []
            }
          ]
        }
      },
      cardtotalpie2: {
        height: 500,
        option: {
          title: {
            text: '供应商分布（前十省份）',
            left: 'center',
            textStyle: {
              color: '#333',
              fontWeight: 'bold',
              fontSize: 14
            }
          },
          legend: {
            data: []
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['20%', '60%'],
              selectedMode: 'single',
              labelLine: {
                length: 30
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                formatter: '\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  b: {
                    color: '#4C5058',
                    fontSize: 14,
                    fontWeight: 'bold',
                    lineHeight: 33
                  },
                  per: {
                    color: '#fff',
                    backgroundColor: '#1890FF',
                    padding: [3, 4],
                    borderRadius: 4
                  }
                }
              },
              data: []
            }
          ]
        }
      }
    }
  },
  created() {
    const user = getLoginData()
    let that = this
    if (user == null) {
      that.$router.push('/user/login')
      return
    }
    that.userInfo = user
  },
  methods: {
    resize() {
      this.$refs.salePie.resize()
      this.$refs.areaPie.resize()
      this.$refs.searchUserLine.resize()
    },
    getDailySummary() {
      let that = this
      let guestcode = that.userInfo.reguserno
      if (that.userInfo.isadmin == 1) {
        that.zviewtitle = '总访问人数'
        wx_getDailySummaryApi().then((res) => {
          if (res.code == 0) {
            let json = JSON.parse(res.data)
            that.zview = json.list[0].visit_total
            that.zviewdate =
              json.list[0].ref_date.slice(0, 4) +
              '-' +
              json.list[0].ref_date.slice(4, 6) +
              '-' +
              json.list[0].ref_date.slice(6, 8)
          }
        })
      } else {
        that.zviewtitle = '访问主页总人数'
        getrecordAnalysisApi({
          guestcode: guestcode,
          type: that.type,
          op_type: 'view'
        }).then((res) => {
          if (res.code == 0) {
            that.zview = res.data[0].ztotal
            that.zviewdate = moment().subtract(1, 'day').format('YYYY-MM-DD')
          }
        })
      }
    },
    getRetain() {
      let that = this
      let guestcode = that.userInfo.reguserno
      if (that.userInfo.isadmin == 1) {
        if (that.dateQuery == 'month') {
          that.zretaintitle = '用户留存(' + that.months + '月)'
        } else {
          that.zretaintitle = '用户留存'
        }
        that.zretaintitle_new = '新增用户留存：'
        wx_getRetainApi({
          begintime: that.beginDate,
          endtime: that.endDate,
          op_type: that.dateQuery
        }).then((res) => {
          if (res.code == 0) {
            let json = JSON.parse(res.data)
            that.zretain_new = json.visit_uv_new[0].value
            that.zretain = json.visit_uv[0].value
          }
        })
      } else {
        that.zretaintitle = '访问主页数（近30天）'
        that.zretaintitle_new = '昨天访问主页数：'
        that.type = '月'
        getrecordAnalysisApi({
          guestcode: guestcode,
          type: that.type,
          op_type: 'view'
        }).then((res) => {
          if (res.code == 0) {
            that.zretain_new = res.data[0].ytotal
            that.zretain = res.data[0].sumtotal
          }
        })
      }
    },
    getVisitTrend() {
      let that = this
      let guestcode = that.userInfo.reguserno
      if (that.userInfo.isadmin == 1) {
        if (that.dateQuery == 'month') {
          that.zvisittrendtitle = '用户打开次数(' + that.months + '月)'
          that.zvisitstaytitle = '用户停留人数（' + that.months + '月）/秒'
        } else {
          that.zvisittrendtitle = '用户打开次数'
          that.zvisitstaytitle = '用户停留人数'
        }
        that.zvisittrendtitle_new = '访问次数：'
        that.zvisitstaytitle_new = '平均访问深度：'
        wx_getVisitTrendApi({
          begintime: that.beginDate,
          endtime: that.endDate,
          op_type: that.dateQuery
        }).then((res) => {
          if (res.code == 0) {
            let json = JSON.parse(res.data)
            that.zvisittrend_session_cnt = json.list[0].session_cnt //打开次数
            that.zvisittrend_visit_pv = json.list[0].visit_pv //访问次数
            that.zvisittrend_visit_uv = json.list[0].visit_uv //访问人数
            that.zvisittrend_visit_uv_new = json.list[0].visit_uv_new //新用户数
            that.zvisittrend_stay_time_uv = json.list[0].stay_time_uv //人均停留时长 (浮点型，单位：秒)
            that.zvisittrend_stay_time_session = json.list[0].stay_time_session //次均停留时长 (浮点型，单位：秒)
            that.zvisittrend_visit_depth = json.list[0].visit_depth //平均访问深度 (浮点型)
          }
        })
      } else {
        that.zvisittrendtitle = '文章阅读数（近30天）'
        that.zvisitstaytitle = '总发布文章数/篇'
        that.zvisittrendtitle_new = '新增阅读数：'
        that.zvisitstaytitle_new = '新增文章数：'
        that.type = '月'
        getrecordAnalysisApi({
          guestcode: guestcode,
          type: that.type,
          op_type: 'reading'
        }).then((res) => {
          if (res.code == 0) {
            that.zvisittrend_visit_pv = res.data[0].ytotal
            that.zvisittrend_session_cnt = res.data[0].sumtotal
          }
        })
        getuserReleaseApi({
          guestcode: guestcode,
          type: that.type
        }).then((res) => {
          if (res.code == 0) {
            that.zvisittrend_stay_time_uv = res.data[0].ztotal
            that.zvisittrend_visit_depth = res.data[0].sumtotal
          }
        })
      }
    },
    getkeyword() {
      let that = this
      let guestcode = that.userInfo.reguserno
      getkeywordListApi({
        guestcode: guestcode,
        type: 'ztotal',
        op_type: ''
      }).then((res) => {
        if (res.code == 0) {
          that.ktotallist.option.series.data = []
          that.ktotallist.option.xAxis.data = []
          that.keywordtotal = res.ztotal
          res.data.forEach((element) => {
            that.ktotallist.option.series.data.push({
              name: element.name,
              value: element.total
            })
            that.ktotallist.option.xAxis.data.push(element.date)
          })
        }
      })
    },
    getkeyword2() {
      let that = this
      let guestcode = that.userInfo.reguserno
      getkeywordListApi({
        guestcode: guestcode,
        type: 'ptotal',
        op_type: ''
      }).then((res) => {
        if (res.code == 0) {
          that.ktotallist2.option.series.data = []
          that.ktotallist2.option.legend.data = []
          that.keywordtotal2 = res.ztotal
          res.data.forEach((element, index) => {
            that.ktotallist2.option.series.data.push({
              name: element.keyword,
              value: element.total
            })
            that.rankingtable.data.push({
              id: index + 1,
              keyword: element.keyword,
              total: element.total
            })
            that.ktotallist2.option.legend.data.push(element.keyword)
          })
        }
      })
    },
    getcardtotal() {
      let that = this
      let guestcode = that.userInfo.reguserno
      getcardTotalApi({
        guestcode: guestcode,
        type: 'pie',
        op_type: ''
      }).then((res) => {
        if (res.code == 0) {
          that.cardtotalpie.option.series[0].data = []
          that.cardtotalpie.option.legend.data = []
          that.cardtotal = res.data[0].total
          res.data.forEach((element) => {
            that.cardtotalpie.option.series[0].data.push({
              name: element.flabel,
              value: element.counts
            })
            that.cardtotalpie.option.legend.data.push(element.flabel)
          })
        }
      })
    },
    getcardtotal2() {
      let that = this
      let guestcode = that.userInfo.reguserno
      getcardTotalApi({
        guestcode: guestcode,
        type: 'pie_area',
        op_type: ''
      }).then((res) => {
        if (res.code == 0) {
          that.cardtotalpie2.option.series[0].data = []
          that.cardtotalpie2.option.legend.data = []
          res.data.forEach((element) => {
            that.cardtotalpie2.option.series[0].data.push({
              name: element.flabel,
              value: element.counts
            })
            that.cardtotalpie2.option.legend.data.push(element.flabel)
          })
        }
      })
    },
    getcardSource() {
      let that = this
      let guestcode = that.userInfo.reguserno
      getcardSourceApi({
        guestcode: guestcode
      }).then((res) => {
        if (res.code == 0) {
          that.inheartuser = res.data1
          that.wxappuser = res.data2
          that.isverifieduser = res.data3
          that.p_inheartuser = res.inheartuser * 100
          that.p_wxappuser = res.wxappuser * 100
          that.p_isverifieduser = res.isverifieduser * 100
        }
      })
    },
    changeQueryDate(value) {
      let that = this
      that.startDate = new Date()
      if (value == 'month') {
        that.beginDate = moment(that.startDate)
          .subtract(1, 'months')
          .startOf('month')
          .format('YYYYMMDD')
        that.endDate = moment(that.startDate)
          .subtract(1, 'months')
          .endOf('month')
          .format('YYYYMMDD')
      }
      if (value == 'week') {
        that.beginDate = moment(
          moment()
            .week(moment().week() - 1)
            .startOf('week')
            .add(1, 'days')
            .valueOf()
        ).format('YYYYMMDD')
        that.endDate = moment(
          moment()
            .week(moment().week() - 1)
            .endOf('week')
            .add(1, 'days')
            .valueOf()
        ).format('YYYYMMDD')
      }
      if (value == 'day') {
        that.beginDate = ''
        that.endDate = ''
      }
      that.dateQuery = value
      that.getRetain()
      that.getVisitTrend()
    }
  },
  mounted() {
    this.startDate = new Date()
    this.beginDate = moment(this.startDate)
      .subtract(1, 'months')
      .startOf('month')
      .format('YYYYMMDD')
    this.endDate = moment(this.startDate)
      .subtract(1, 'months')
      .endOf('month')
      .format('YYYYMMDD')
    this.months = moment().add(-1, 'month').format('M')
    this.getDailySummary()
    this.getRetain()
    this.getVisitTrend()
    this.getcardSource()
    this.getkeyword()
    this.getkeyword2()
    this.getcardtotal()
    this.getcardtotal2()
  }
}
</script>

<style lang="sass" scoped>
.sc-card-height
  height: 250px
</style>
